<template>
  <div id="app">
    <div class="add">
      编号:
      <input type="text" v-model="brand.id" ref="id"  v-mycolor='"red"'/>
      品牌名称:
      <input type="text" v-model="brand.bname" ref="myname" v-myFocus v-mycolor='usercolor' />
      <!-- 绑定事件 -->
      <input type="button" value="添加" @click="add" ref="btn" />
    </div>
    <div class="add">
      品牌名称:
      <input type="text" placeholder="请输入搜索条件"  v-mycolor='"yellow"' v-model="userkey" />
    </div>
    <div>
      <table class="tb">
        <thead>
          <tr>
            <th>编号</th>
            <th>品牌名称</th>
            <th>创立时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(value,index) in search" :key="index">
            <td>{{value.id}}</td>
            <td>{{value.bname}}</td>
            <td>{{value.time | timeFormat('/')}}</td>
            <td>
              <a href="#" @click.prevent="del(index)">删除</a>
            </td>
          </tr>
          <tr>
            <td colspan="4" v-show="search.length == 0">没有任何数据，请先添加</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
// 引入定义好的全局自定义指令
// 使用到了对象的解构
import { myfocus, mycolor } from '@/tools/userDirectives.js'
import { timeFormat } from '@/tools/userFilters.js'
export default {
  data () {
    return {
      userkey: '',
      usercolor: 'blue',
      brand: {
        id: '',
        bname: ''
      },
      brandList: [
        {
          id: '1',
          bname: '大众',
          time: new Date()
        },
        {
          id: '2',
          bname: 'QQ',
          time: new Date()
        },
        {
          id: '3',
          bname: '比亚迪',
          time: new Date()
        }
      ]
    }
  },
  // 添加计算属性
  computed: {
    search () {
      // 实现数据的筛选
      var arr = []
      for (var i = 0; i < this.brandList.length; i++) {
        if (this.brandList[i].bname.indexOf(this.userkey) !== -1) {
          arr.push(this.brandList[i])
        }
      }
      return arr
    }
  },
  methods: {
    //   删除
    del (index) {
      this.brandList.splice(index, 1)
    },
    //   添加
    add () {
      this.brand.time = new Date()
      //   展开运算符的使用：将对象展开为一个一个成员，再生成一个完整的对象，添加到数组
      this.brandList.push({ ...this.brand })
    }
  },
  // 实现指令的注册
  directives: {
    myFocus: myfocus,
    mycolor
  },
  // 创建局部过滤器
  filters: {
    timeFormat
    // timeFormat: function (time, spe) {
    //   console.log(time, spe)
    //   // 具体的业务处理
    //   let year = time.getFullYear()
    //   let month = time.getMonth() + 1
    //   let day = time.getDate()
    //   return year + spe + month + spe + day
    // }
  }
}
</script>
<style lang="less" scoped>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>
